import { LeftOutline, EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { Image, Button, Input, Toast, Dialog, Result } from 'antd-mobile';
import { useRef, useState } from 'react';
import { isMobileNumber, isEmail, isPassword } from '@/utils/validate';
import { ToastHandler } from 'antd-mobile/es/components/toast';

function ResetPassword() {
  const navigate = useNavigate();
  const [eyeVisible, setEyeVisible] = useState(false);
  const [username, setUsername] = useState('');
  const [validValue, setValidValue] = useState('');
  const [newPwd, setNewPwd] = useState('');

  const isCheck = () => {
    if (username.trim() === '') {
      Toast.show({
        content: '请输入手机号/邮箱',
        position: 'top',
      });
      return false;
    }
    if (!isMobileNumber(username) && !isEmail(username)) {
      Toast.show({
        content: '请输入正确的手机号/邮箱',
        position: 'top',
      });
      return false;
    }
    if (validValue.trim() === '') {
      Toast.show({
        content: '请输入验证码',
        position: 'top',
      });
      return false;
    }
    if (newPwd === '') {
      Toast.show({
        content: '请输入新密码',
        position: 'top',
      });
      return false;
    }
    if (!isPassword(newPwd)) {
      Toast.show({
        content: '密码长度为6-20位，须包含大写字母、小写字母、数字、特殊符号（!@#$%^&*()_.+=?-）',
        position: 'top',
        duration: 3500,
      });
      return false;
    }
    return true;
  };

  const toastHandler = useRef<ToastHandler>();
  const onSubmit = () => {
    if (!isCheck()) return;
    toastHandler.current = Toast.show({
      icon: 'loading',
      duration: 0,
      content: '正在提交...',
      maskClickable: false,
    });
    // 模拟请求
    setTimeout(() => {
      toastHandler.current?.close();
      Dialog.alert({
        content: (
          <Result
            status="success"
            title="密码重置成功！"
            description="请妥善保管您的新密码，下次登录时请使用新密码登录。"
          />
        ),
        confirmText: '前往登录',
        onConfirm: () => {
          navigate('/login');
        },
      });
    }, 1000);
  };

  return (
    <div className="h-[100vh] bg-white">
      <div className="p-[16px_16px]">
        <LeftOutline className="text-[#000] text-[22px]" onClick={() => navigate('/login')} />
      </div>

      <Image className="w-[125px] mx-auto mt-[20px]" src="/src/assets/imgs/logo_cp.jpg" />
      <div className="text-[18px] text-center mt-[10px] text-[#666]">重置密码</div>

      <div className="px-[20px] mt-[20px]">
        <div className="input-animation">
          <Input
            className="h-[22px] box-content py-[18px] border-b border-solid"
            onlyShowClearWhenFocus={false}
            placeholder="请输入手机号/邮箱"
            clearable
            onChange={(v) => setUsername(v)}
            value={username}
            autoComplete="off"
            autoFocus={true}
          />
          <span className="input-animation-border block h-[1px] bg-color-primary mx-auto -mt-[1px]"></span>
        </div>
        <div className="input-animation">
          <div className="flex items-center border-b border-solid">
            <Input
              className="h-[22px] box-content py-[18px]"
              onlyShowClearWhenFocus={false}
              placeholder="请输入验证码"
              clearable
              autoComplete="off"
              value={validValue}
              maxLength={10}
              onChange={(v) => {
                setValidValue(v);
              }}
            />
            <Button className="flex-none w-auto ml-[10px]" fill="none" color="primary" size="middle">
              获取验证码
            </Button>
          </div>
          <span className="input-animation-border block h-[1px] bg-color-primary mx-auto -mt-[1px]"></span>
        </div>
        <div className="input-animation relative">
          {/* 防止自动填充的手段 -- */}
          <Input
            className="opacity-0 absolute -top-[9999px] -left-[9999px]"
            type="text"
            placeholder="防止自动填充的手段"
            autoComplete="on"
          />
          <Input
            className="opacity-0 absolute -top-[9999px] -left-[9999px]"
            type="password"
            placeholder="防止自动填充的手段"
            autoComplete="on"
          />
          {/* -- 防止自动填充的手段 */}

          <Input
            type={eyeVisible ? 'text' : 'password'}
            className="h-[22px] box-content py-[18px] border-b border-solid"
            onlyShowClearWhenFocus={false}
            placeholder="设置新密码（6-20位大小字母数字符号组合）"
            maxLength={30}
            clearable
            autoComplete="off"
            value={newPwd}
            onChange={(v) => setNewPwd(v)}
          />
          {!eyeVisible ? (
            <EyeInvisibleOutline
              className="absolute top-[18px] right-[30px] text-[20px] text-[#999]"
              onClick={() => setEyeVisible(true)}
            />
          ) : (
            <EyeOutline
              className="absolute top-[18px] right-[30px] text-[20px] text-[#999]"
              onClick={() => setEyeVisible(false)}
            />
          )}
          <span className="input-animation-border block h-[1px] bg-color-primary mx-auto -mt-[1px]"></span>
        </div>
        <Button className="mt-[40px]" block color="primary" size="large" onClick={onSubmit}>
          确定
        </Button>
      </div>
    </div>
  );
}

export default ResetPassword;
